<!--
  单基交易列表 YJUI
 -->
<template>
  <section class="transactionList">
  <!--  <page-title :title="titleName" @headerClickCallBack="headerClickCallBack">
      <div v-if="HXTSChannel && HXTSChannel != 'HX'" slot="header_right" class="header_right">历史</div>
    </page-title> -->
    <div class="t-content">
      <div class="tabtext swiper-container" id="tabCon">
        <ul class="tab-scroll-wrap swiper-wrapper" ref="swiperWrapper">
          <li
            class="mui-control-item swiper-slide"
            :key="index"
            :class="[currentTabIdx == index ? 'active' : '']"
            v-for="(item, index) in navList"
            @click="changeTab(item, index)"
          >
            {{ item.type }}
          </li>
        </ul>
      </div>
      {{menus}}--menus
      <div id="tabContain" class="tabContain boxList swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in menus" :key="index">
            <!-- pageNum=1&&无数据 -->
            <no-data v-show="item.isNoData"></no-data>
            <div class="dataLoading" v-if="isdataLoading && !item.isNoData">
              <!-- <img src="@/assets/img/account/toDoLoading.gif" alt="" /> -->
              <!-- <p>数据正在加载中，请稍后…</p> -->
            </div>
            <mescroll-vue
              ref="mescroll0"
              v-show="currentTabIdx == index"
              :id="'tab-container' + index"
              :class="'tabCon' + index"
              :down="getMescrollDown(index)"
              :up="getMescrollUp(index)"
              @init="mescrollInit"
              :style="{ height: 'calc(100vh - ' + conHeight + ')' ,display:(!item.isNoData?'block':'none')}"
            >
              <listcontent
                :minHeights="minHeight"
                :list="item.curTabList"
                :newListLength="item.curTabListLength"
                :id="'listContent' + index"
              ></listcontent>
              <div
                class="endData"
                v-show="item.canRefresh && !item.curTabListLength"
              >
                <span
                  style="font-size: 0.24rem; color: #868e9f; margin: 0 0.16rem"
                  >暂无更多内容</span
                >
              </div>
            </mescroll-vue>
          </div>
        </div>
      </div>

    </div>
  </section>
</template>

<script>
import "swiper/dist/css/swiper.min.css";
import Swiper from "swiper";
// import MeScroll from "mescroll.js";
import "mescroll.js/mescroll.min.css";
import { mapState, mapActions } from "vuex";
// import "@/assets/css/pages/financial/publicPlacement/transactionList.scss";

export default {
  components: {
    pageTitle: (resolve) => require(["@/components/musicTitle"], resolve),
    listcontent: (resolve) =>
      require(["@/components/listcontent"], resolve),
    MescrollVue: (resolve) =>
      require(["@/components/mescroll"], resolve),
    bottomLine: (resolve) =>
      require(["@/components/common/bottomLine"], resolve),
    noData: (resolve) =>
      require(["@/components/common/noDataImg.vue"], resolve),
  },
  data() {
    return {
      titleName: "交易记录",
      // http://local.chtfund.com:8500/vuePage/financial/publicPlacement/transactionList?fundCode=000928&tradeNo=&appNewWebView=1
      fundCode: this.getParams("fundCode"), // 基金编号
      tradeNo: this.getParams("tradeNo"), // 基金编号
      menus: [],
      currentTabIdx: 0,
      navList: [
        {
          type: "买入",
          num: "0",
        },
        {
          type: "定投",
          num: "2",
        },
        {
          type: "分红",
          num: "3",
        },
        {
          type: "赎回",
          num: "1",
        },
      ],

      // 传参
      applyType: "0", //对应navList->num
      pageSize: 10,

      //swiper实例
      mySwiper: null,
      swiperWidth: 0, //swiper可视宽度
      maxTranslate: "", //最大的滑动距离
      maxWidth: "",
      slide: {
        offsetLeft: 0,
        clientWidth: 0,
      },
      slideLeft: 0,
      slideWidth: 0,
      slideCenter: 0,
      nowTlanslate: 0,
      pageSwiper: {},
      minHeight: 0,
      conHeight: 0,
      // 分页
      tab0: { mescroll: null, list: [], isListInit: false },
      tab1: { mescroll: null, list: [], isListInit: false },
      tab2: { mescroll: null, list: [], isListInit: false },
      tab3: { mescroll: null, list: [], isListInit: false },
      isdataLoading: true,
      topDropText: "松开立即刷新",
      HXTSChannel: '', // 渠道标识

      paramData: {
        page: 1,
        limit: 10,
        sort: "discount_prize",
        sortStyle: 1,
        province_id: 110000,
        city_id: 110100,
        dealer_id: "",
        brand: "",
        vehicle: "",
        paint_color: "",
        lng: 116.4133837,
        lat: 39.91092455,
      },
    };
  },
  computed: {
    ...mapState({
      remainLastScrollTop: (state) => state.remainLastScrollTop,
    }),
  },
  created() {

  },
  activated() {
    // 滚动到缓存区域
    this.transactionListEnter()
  },
  beforeRouteLeave(to, from, next) {
    if(to.name == 'publicTradeDetail') {
      from.meta.keepAlive = true;
      this.transactionListLeave()
    }else {
      from.meta.keepAlive = false;
      this.transactionListScroll()
    }
    next()
  },
  watch: {},
  methods: {
    ...mapActions(["changeHeaderHeight"]),
    // 跳转历史记录
    headerClickCallBack() {
      this.$urls.routerPush(this, this.$urls.productTradeListHistory_url, { fundCode: this.fundCode }, true, this.HXTSChannel);
    },
    transactionListEnter() {
      // 记录列表滚动的位置,隐藏顶部按钮和isBounce的配置
      var tab = '.tabCon'+ this.currentTabIdx;
      this.$refs.mescroll0 && this.$refs.mescroll0[this.currentTabIdx] && $(tab).scrollTop(this.remainLastScrollTop)
    },
    transactionListLeave() {
      // 记录列表滚动的位置,隐藏顶部按钮和isBounce的配置
      this.$refs.mescroll0 && this.$refs.mescroll0[this.currentTabIdx] && this.$refs.mescroll0[this.currentTabIdx].beforeRouteLeave()
    },
    transactionListScroll() {
      this.$refs.mescroll0 && this.$refs.mescroll0[this.currentTabIdx] && this.$refs.mescroll0[this.currentTabIdx].lastScrollTop == 0
    },
    getParams(key) {
      return this.$splitUrl()[key]
        ? this.$splitUrl()[key]
        : this.$route.query[key]
        ? this.$route.query[key]
        : "";
    },
    //各自tab列表整理
    getData() {
      let _this = this;
      let studentRow = Array(4).fill({});
      let arr = [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }];
      // 创建实例以后，再在实例上绑定新属性，vue是无法进行双向绑定的。
      $.each(arr, function (i, el) {
        _this.menus.push({
          id: i,
          // isNoData :false, //独立判断数据状态
          // canRefresh:false,
          // curTabListLength:false,
        });
        el.isNoData = false; //独立判断数据状态
        el.canRefresh = false;
        el.curTabListLength = false;
        // el.isdataLo = false;
      });
    },
    changeTab(item, idx) {

      let _this = this;
       console.log('changeTab...')
      _this.currentTabIdx = idx;
      _this.applyType = item.num;
      $(".mescroll").scrollTop(0);
      let curTab = this.getTabData(idx); // 当前列表
      let newTab = this.getTabData(idx); // 新转换的列表

      // curTab.mescroll.hideTopBtn(); // 隐藏当前列表的回到顶部按钮

      if(this.menus[idx]&&this.menus[idx].curTabList&&this.menus[idx].curTabList.length>0){
          this.isdataLoading=false
      }
      else {
           this.isdataLoading=true
      }

      if (!newTab.isListInit) {
             this.isdataLoading=true
        // newTab.mescroll.triggerUpScroll();	//主动触发上拉加载
      } else {
        setTimeout(() => {
          // 检查新转换的列表是否需要显示回到到顶按钮
          var curScrollTop = newTab.mescroll.getScrollTop();
          if (curScrollTop >= newTab.mescroll.optUp.toTop.offset) {
            newTab.mescroll.showTopBtn();
               alert(1)
          } else {
            newTab.mescroll.hideTopBtn();
          }
        }, 30);
      }
         
    },
    // 获取菜单对应的数据
    getTabData(tabIdx) {
      if (tabIdx == null) tabIdx = this.currentTabIdx;
      if (tabIdx == 0) {
        return this.tab0;
      } else if (tabIdx == 1) {
        return this.tab1;
      } else if (tabIdx == 2) {
        return this.tab2;
      } else if (tabIdx == 3) {
        return this.tab3;
      }
    },
    getPageList(tabIdx, page, mescroll) {
        console.log('这是数据。。。')
      let _this = this;
      let curMenusType = _this.menus[tabIdx];
      this.$axiosHttp.http(
       {
         method: "get",
         url: `https://mall.faw-vw.com/index.php/Specialcar/SpecialInfo/specialList?lat=39.91092455&limit=10&lng=116.4133837&province_id=110000&page=${_this.paramData.page}&&sort=${_this.paramData.sort}&sortStyle=1&dealer_id=${_this.paramData.dealer_id}&brand=${_this.paramData.brand}&vehicle=${_this.paramData.vehicle}&paint_color=${_this.paramData.paint_color}`,
         data: _this.paramData,
       },
        (res) => {
          var curPageData = res.data.pageList; // 接口返回的当前页数据列表

          // 接口返回的总数据量(比如列表有26个数据,每页10条,共3页; 则totalSize值为26)
          var totalCount = res.data.pageItems.totalCount;
          // 接口返回的总页数 (比如列表有26个数据,每页10条,共3页; 则totalPage值为3)
          var totalPage = Math.ceil(totalCount / _this.pageSize);
          this.isdataLoading = false;
          curMenusType.curTabListLength = false;
          curMenusType.isNoData = false;
          if (page.num == 1) {
            curMenusType.curTabList = curPageData;
            if (curPageData.length != _this.pageSize) {
              curMenusType.canRefresh = true;
            }
          } else {
            curMenusType.curTabList =
              curMenusType.curTabList.concat(curPageData); // 追加新数据
            curMenusType.canRefresh = false;
          }
          this.$set(this.menus, tabIdx, this.menus[tabIdx]);
          // totalPage列表总页数
          mescroll.endByPage(curPageData.length, totalPage);
        },
        (res) => {
          this.$commonJS.toastI(res.data.message);
        },
        (res) => {
          if (res.data.status == "1000") {
            _this.$nextTick(() => {
              if (page.num == 1||page.num==0) {
                curMenusType.isNoData = true;
              }
            });
            this.isdataLoading = false;
          }
          this.$set(this.menus, tabIdx, this.menus[tabIdx]);
          mescroll.endErr(); // 联网失败的回调,隐藏下拉刷新的状态
        }
      );
    },
    // mescroll组件初始化的回调,可获取到mescroll对象
    mescrollInit(mescroll) {
        console.log('mescrollInit...')
      // debugger
      let indexId = mescroll.scrollDom.id;
      mescroll.tabType = indexId.slice(-1); // 加入标记,便于在回调中取到对应的list
      if (indexId == "tab-container0") {
        this.tab0.mescroll = mescroll;
      } else if (indexId == "tab-container1") {
        this.tab1.mescroll = mescroll;
      } else if (indexId == "tab-container2") {
        this.tab2.mescroll = mescroll;
      } else {
        this.tab3.mescroll = mescroll;
      }
    },
    getMescrollDown(tabIdx) {
      let isAuto = tabIdx == 0; // 第一个mescroll传入true,列表自动加载
      return {
        auto: isAuto,
        callback: this.downCallback,
        textInOffset:
          '<p class="downwarp-tip">下拉刷新<img class="mescroll-downwarp-pullImg" src=' +
          require("@/assets/imgs/loading.gif") +
          ' alt=""></p>', // 下拉的距离在offset范围内的提示文本
        textOutOffset:
          '<p class="downwarp-tip">松开刷新<img class="mescroll-downwarp-pullImg" src=' +
          require("@/assets/imgs/loading.gif") +
          ' alt=""></p>', // 下拉的距离大于offset范围的提示文本
        textLoading:
          '<p class="downwarp-tip">刷新中<img class="mescroll-downwarp-pullImg" src=' +
          require("@/assets/imgs/loading.gif") +
          ' alt=""></p>', // 加载中的提示文本
      };
    },
    getMescrollUp(tabIdx) {
      let emptyWarpId = "listContent" + tabIdx;
      return {
        auto: false,
        callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
        noMoreSize: 11, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
        empty: {
          warpId: emptyWarpId, // 父布局的id;
          icon: require("@/assets/imgs/noData.png"), // 图标,默认null
          tip: "暂无数据222", // 提示
        },
        htmlNodata:
          '<div><img style="width: .8rem;" src=' +
          require("@/assets/imgs/c_left.png") +
          '><span style="font-size: .24rem;color: #868e9f;margin: 0 .16rem;">北京中植基金销售有限公司</span><img style="width: .8rem;" src=' +
          require("@/assets/imgs/c_right.png") +
          "></div>",
        htmlNodata:
          '<div><span style="font-size: .24rem;color: #868e9f;margin: 0 .16rem;">暂无更多内容</span></div>',
      };
    } /* 下拉刷新的回调 */,
    downCallback(mescroll) {
      let _this = this;
      mescroll.resetUpScroll(); // 触发下拉刷新的回调,加载第一页的数据
    },
    /* 上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
    upCallback(page, mescroll) {
        console.log('upCallback...')
      // debugger
      let _this = this;
      if (mescroll.tabType == 0) {
        this.tab0.isListInit = true; // 标记列表已初始化,保证列表只初始化一次
        this.getPageList(mescroll.tabType, page, mescroll);
      } else if (mescroll.tabType == 1) {
        this.tab1.isListInit = true; // 标记列表已初始化,保证列表只初始化一次
        this.getPageList(mescroll.tabType, page, mescroll);
      } else if (mescroll.tabType == 2) {
        this.tab2.isListInit = true; // 标记列表已初始化,保证列表只初始化一次
        this.getPageList(mescroll.tabType, page, mescroll);
      } else if (mescroll.tabType == 3) {
        this.tab3.isListInit = true; // 标记列表已初始化,保证列表只初始化一次
        this.getPageList(mescroll.tabType, page, mescroll);
      }
    },
  },
  mounted() {
    var that = this;
    that.mySwiper = new Swiper("#tabCon", {
      freeMode: true,
      freeModeMomentumRatio: 0.5,
      slidesPerView: "auto",
      resistanceRatio: 0.7,
      on: {
        tap: function (swiper) {
          that.swiperWidth = that.$refs.swiperWrapper.clientWidth;
          that.maxTranslate = that.mySwiper.maxTranslate();
          that.maxWidth = -that.maxTranslate + that.swiperWidth / 2;
          if (that.currentTabIdx == that.navList[this.clickedIndex].id) {
            return;
          }
          that.currentTabIdx = that.navList[this.clickedIndex].id;
          that.slide = this.slides[this.clickedIndex];
          that.slideLeft = that.slide.offsetLeft;
          that.slideWidth = that.slide.clientWidth;
          that.slideCenter = that.slideLeft + that.slideWidth / 2;
          that.mySwiper.setTransition(300);
          if (that.slideCenter < that.swiperWidth / 2) {
            that.mySwiper.setTranslate(0);
          } else if (that.slideCenter > that.maxWidth) {
            that.mySwiper.setTranslate(that.maxTranslate);
          } else {
            var nowTlanslate = that.slideCenter - that.swiperWidth / 2;
            that.mySwiper.setTranslate(-nowTlanslate);
          }
          that.pageSwiper.slideTo(this.clickedIndex, 200, false);
        },
      },
    });

    //swiper里边内容
    that.pageSwiper = new Swiper("#tabContain", {
      autoplay: false,
      direction: "horizontal", // 切换选项
      resistanceRatio: 0,
      paginationClickable: true,
      watchSlidesProgress: true,
      on: {
        slideChangeTransitionEnd: function () {},
        slideChange: function () {
          that.swiperWidth = that.$refs.swiperWrapper.clientWidth;
          that.maxTranslate = that.mySwiper.maxTranslate();
          that.maxWidth = -that.maxTranslate + that.swiperWidth / 2;
          that.currentTabIdx = this.activeIndex;
          that.changeTab(that.navList[this.activeIndex], that.currentTabIdx);
          that.slide = that.mySwiper.slides[that.currentTabIdx];
          that.slideLeft = that.slide.offsetLeft;
          that.slideWidth = that.slide.clientWidth;
          that.slideCenter = that.slideLeft + that.slideWidth / 2;
          that.mySwiper.setTransition(300);
          if (that.slideCenter < that.swiperWidth / 2) {
            that.mySwiper.setTranslate(0);
          } else if (that.slideCenter > that.maxWidth) {
            that.mySwiper.setTranslate(that.maxTranslate);
          } else {
            var nowTlanslate = that.slideCenter - that.swiperWidth / 2;
            that.mySwiper.setTranslate(-nowTlanslate);
          }
        },
      },
    });
  },
};
</script>

<style scoped lang="scss">
.header_right {
  font-size: 14px;
  color: #169BD5;
}
.mescroll-downwarp-pullText {
  font-size: 0.24rem;
  color: #666;
}
.mescroll-downwarp-pullImg {
  display: block;
  width: 0.5rem;
  margin: 0.3rem auto 0.4rem;
}
.mescroll-downwarp .downwarp-progress {
  display: none !important;
}
.endData {
  min-height: 30px;
  padding: 15px 0;
  text-align: center;
}

// 当前页样式
.transactionList {
  // background: #f7fafd !important;
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  .t-content {

    .tabtext {
      box-shadow: none;
      color: #9b9b9b;
      padding-top: 0;
      height: 0.8rem;
      background-color: #fff;
      // margin-bottom: 0.18rem;
      .tab-scroll-wrap {
        width: 100%;
        display: flex;

        .mui-control-item {
          position: relative;
          flex: 1;
          font-size: 0.28rem;
          line-height: 0.8rem;
          padding: 0;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 400;
          text-align: center;
          &.active {
            color: #272727;
            &::after {
              position: absolute;
              height: 0.06rem;
              bottom: 0rem;
              left: 50%;
              margin-left: -0.25rem;
              content: "";
              width: 0.5rem;
              background: linear-gradient(to right, #6c83c9 0%, #061d6a 100%);
              border-radius: 0.03rem;
            }
          }
        }
      }
    }
  }
}

.dataLoading {
  margin-top: 2.7rem;
  img {
    width: 3.9rem;
    height: 1.9rem;
    display: block;
    margin: 0 auto;
  }
  p {
    font-size: 0.24rem;
    text-align: center;
    color: #9aa4bd;
    line-height: 0.24rem;
    margin-top: 0.02rem;
  }
}


</style>
